<template>
    <div class="courseDetail" style="width: 100%">
        <top-bar styleSize="small" :bgImgUrl="bgImgUrl">
            <div class="next">
                <svg class="icon" aria-hidden="true" @click="next">
                    <use xlink:href="#icon-fanhui1"></use>
                </svg>
            </div>
            <div class="header">
                <div class="box">
                    <span class="flag"></span>
                    <span class="subject">工商管理</span>
                </div>
            </div>
        </top-bar>
        <div class="container">
            <div class="work-item">
                <div class="rate-progress">
                    <span class="text">学习进度</span>
                    <span class="detail">查看详情</span>
                </div>
                <div class="canvas">
                    <div class="box">
                        <div class="progress-item">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-tuifangmiancha"></use>
                            </svg>
                            <van-progress :percentage="68" :show-pivot="false" />
                            <span class="view-text">
                        <div class="progress-text">
                            68<span>%</span>
                        </div>
                        <span class="class">课件学习</span>
                    </span>
                        </div>
                        <div class="progress-item">
                            <svg class="icon" aria-hidden="true" >
                                <use xlink:href="#icon-tuifangmiancha"></use>
                            </svg>
                            <van-progress :percentage="73" :show-pivot="false" />
                            <span class="view-text">
                        <div class="progress-text">
                            73<span>%</span>
                        </div>
                        <span class="class">作业完成</span>
                    </span>
                        </div>
                        <div class="progress-item">
                            <svg class="icon" aria-hidden="true" >
                                <use xlink:href="#icon-tuifangmiancha"></use>
                            </svg>
                            <van-progress :percentage="89" :show-pivot="false" />
                            <span class="view-text">
                        <div class="progress-text">
                            89<span>%</span>
                        </div>
                        <span class="class">讨论参与</span>
                    </span>
                        </div>
                        <div class="progress-item">
                            <svg class="icon" aria-hidden="true" >
                                <use xlink:href="#icon-tuifangmiancha"></use>
                            </svg>
                            <van-progress :percentage="89" :show-pivot="false" />
                            <span class="view-text">
                        <div class="progress-text">
                            89<span>%</span>
                        </div>
                        <span class="class">讨论参与</span>
                    </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="work-item">
                <div class="work-item-title">
                    <span class="desc">学习内容</span>
                </div>
                <div class="work-item-box">
                    <div class="select-item" @click="courseInfo">
                        <div class="icon-item">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-xiaoxi"></use>
                            </svg>
                        </div>
                        <p class="text">课程信息</p>
                    </div>
                    <div class="select-item">
                        <div class="icon-item">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-2"></use>
                            </svg>
                        </div>
                        <p class="text">课件学习</p>
                    </div>
                    <div class="select-item">
                        <div class="icon-item">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-ziliao1"></use>
                            </svg>
                        </div>
                        <p class="text">课程作业</p>
                    </div>
                    <div class="select-item">
                        <div class="icon-item">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-ziliao"></use>
                            </svg>
                        </div>
                        <p class="text">课程资料</p>
                    </div>
                    <div class="select-item">
                        <div class="icon-item">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-barchart-Fill"></use>
                            </svg>
                        </div>
                        <p class="text">课程论坛</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    /*
    * 课程详情
    * */
    import topBar from "@/components/topBar/topBar";
    export default {
        name: "courseDetail",
        data() {
            return {
                courseId: this.$route.params.courseId,
                bgImgUrl: require('../../../assets/images/1920c.jpg'),
            }
        },
        methods: {
            next() {
                this.$router.back()
            },
            courseInfo() {
                this.$router.push({
                    path: 'courseinfo',
                    name: 'courseInfo'
                })
            }
        },
        components: {
            topBar
        }
    }
</script>

<style lang="scss" scoped>
    @import "@/assets/styles/icon_small.scss";
    .courseDetail {
        background-color: white;
        height: 100%;
        /*overflow: auto;*/
    }
    .next {
        color: #343e4c;
        text-align: left;
        height: 36px;
        line-height: 36px;
        padding: 20px;
        .icon {
            width: 1.4em;
            height: 1.4em;
        }
    }
    .header {
        color: #343e4c;
        text-align: left;
        line-height: 36px;
        height: 36px;
        padding-bottom: 29px;
        padding-left: 20px;
        padding-right: 20px;
        font-weight: 600;
        .box {
            padding-left: 10px;
            position: relative;
            .flag {
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 4px;
                height: 10px;
                border-radius: 6px;
                background-color: #0f57d5;
            }
            .subject {
                font-size: 20px;
                vertical-align: middle;
            }
        }
    }
    .container {
        padding: 0 20px;
        margin-top: -46px;
        background-color: white;
        .work-item {
            margin-bottom: 20px;
            /*
            学习进度 canvas
            */
            .rate-progress {
                color: #343e4c;
                height: 20px;
                padding-bottom: 26px;
                text-align: left;
                .text {
                    font-size: 16px;
                    line-height: 20px;
                    font-weight: 700;
                }
                .detail {
                    position: relative;
                    float: right;
                    display: inline-block;
                    font-size: 14px;
                    line-height: 20px;
                    padding-right: 10px;
                    color: #9aa1ab;
                    &::after {
                        content: "";
                        position: absolute;
                        right: 0;
                        top: 50%;
                        transform: translateY(-50%) rotate(45deg);
                        width: 4px;
                        height: 4px;
                        border-top-width: 1px;
                        border-top-style: solid;
                        border-top-color: #9aa1ab;
                        border-right-width: 1px;
                        border-right-style: solid;
                        border-right-color: #9aa1ab;
                    }
                }
            }
            .canvas {
                .box {
                    display: flex;
                    overflow-x: scroll;
                    &::-webkit-scrollbar {display: none}
                }
                .progress-item {
                    flex: 1;
                    min-width: 31%;
                    float: left;
                    padding-right: 10px;
                    box-sizing: border-box;
                    .view-text {
                        .progress-text {
                            padding: 14px;
                            line-height: 22px;
                            color: #343e4c;
                            font-weight: bold;
                            span {
                                font-size: 14px;
                                color: #9aa1ab;
                            }
                        }
                        .class {
                            font-size: 14px;
                            color: #5c697b;
                        }
                    }
                }
            }

            /*
            学习内容
            */
            .work-item-title {
                text-align: left;
                height: 40px;
                padding-bottom: 10px;
                padding-top: 10px;
                margin-bottom: 26px;
                .desc {
                    line-height: 40px;
                    font-size: 16px;
                    font-weight: 700;
                }
            }
            .work-item-box {
                text-align: left;

                .select-item {
                    box-sizing: border-box;
                    display: inline-block;
                    padding-bottom: 20px;
                    width: 33.333%;

                    .icon-item {
                        margin: 0 auto;
                        text-align: center;
                        border-radius: 12px;
                        width: 44px;
                        height: 44px;
                    }

                    .text {
                        font-size: 12px;
                        text-align: center;
                        color: #5c697b;
                    }
                }
            }
        }
    }
</style>